<!DOCTYPE html>
<html>
<head>
    <title>日期时间选择器</title>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            background-color: #333;
            color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            padding: 50px;
        }

        label {
            display: block;
            margin-bottom: 10px;
        }

        input[type="datetime-local"] {
            width: 300px;
            padding: 10px;
            border: none;
            background-color: #535353;
            color: #fff;
            font-size: 16px;
        }

        button {
            padding: 10px;
            border: none;
            background-color: #4CAF50;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        #selectedDateTime {
            display: none;
            margin-top: 10px;
            padding: 10px;
            border: none;
            background-color: #535353;
            color: #fff;
            font-size: 16px;
        }
    </style>
    <script src="js/jquery-3.6.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="top"></div>
<h2>日期时间选择器</h2>
<label for="datetime">请选择日期和时间：</label>
<input type="datetime-local" id="datetime" min="" max="">
<button id="btnSubmit">确定</button>
<div id="selectedDateTime"></div>
<div class="form-group">
    <label for="price">商品价格</label>
    <input type="text" class="form-control" id="price"  >
</div>
<div class="form-group">
    <label for="stock">商品库存</label>
    <input type="text" class="form-control" id="stock" >
</div>
<button type="button" id="finish" class="btn btn-primary">修改</button>
<script>

    $(function () {
        $("#top").load("top2.html")
        //接收列表页面传来的pid参数 并发送ajax请求获取数据
        const searchParams = new URLSearchParams(location.search);
        const pId = searchParams.get("pId");
        $.ajax({
            url: "/PDD/product?method=detail",
            data: {
                "pId": pId
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                let product = data.data[0]
                $("#price").val(product.price)
                $("#stock").val(product.stock)
            }
        })

        // 获取日期时间选择器元素
        let datetime = $('#datetime');
        let btnSubmit = $('#btnSubmit');
        let selectedDateTime = $('#selectedDateTime');

        let now = new Date();
        //获取当前时间，并格式化为本地时间字符串
        let currentDateTime = now.getFullYear() + '-' +
            ('0' + (now.getMonth() + 1)).slice(-2) + '-' +
            ('0' + now.getDate()).slice(-2) + 'T' +
            ('0' + now.getHours()).slice(-2) + ':' +
            ('0' + now.getMinutes()).slice(-2) + ':' +
            ('0' + now.getSeconds()).slice(-2);


        datetime.attr('min', currentDateTime);
        datetime.attr('value', currentDateTime);

        // 监听 click 事件
        btnSubmit.on('click', function() {
            // 获取选择的时间
            let selectedDateTimeValue = datetime.val();
            // 将选择的时间和当前时间都转换为时间戳
            let selectedTimestamp = new Date(selectedDateTimeValue).getTime();
            let currentTimestamp = new Date().getTime();
            // 如果选择的时间早于当前时间，则提示错误信息
            if (selectedTimestamp < currentTimestamp) {
                alert('当前选择时间已经过去！');
                return;
            }
            // 将选择的时间格式化为指定格式
            let formatter = new Intl.DateTimeFormat('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            let parts = selectedDateTimeValue.split(/[-T:\.]/);
            let formattedDateTime = parts[0] + '-' + parts[1] + '-' + parts[2] + ' ' + parts[3] + ':' + parts[4] + ':' + parts[5];
            // 显示选择的时间
            selectedDateTime.text(formattedDateTime).show();
            alert(selectedDateTime.text())
        });

        //修改按钮点击事件
        $("#finish").click(function (){
            //发送ajax请求提交数据给后端
            $.ajax({
                url:"/PDD/product?method=modifyProductInTime",
                data:{
                    "pId":pId,
                    "price":$("#price").val(),
                    "stock":$("#stock").val(),
                    "scheduledTime":selectedDateTime.text()
                },
                type: "POST",
                dataType: "json",
                success:function (data){
                    if(data.code===1){
                        alert("定时成功")
                        window.history.back()
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (textStatus === "timeout") {
                        alert("请求超时");
                    } else if (textStatus === "error") {
                        alert("请求失败：" + errorThrown);
                    } else {
                        alert("未知错误：" + errorThrown);
                    }
                }
            })
        })
    })


</script>
</body>
</html>
